<template>
  <div class="naviPane">
    <div class="logo">
      <a href="/">
        <img src="../../../../static/images/logo.png">
      </a>
    </div>
    <div class="naviInfo">
      <ul>
        <li><a href="#">我的首页</a></li>
        <li><a href="/">首页</a></li>
        <li><a href="#">竞彩资讯</a></li>
        <li class="mainMenu">账户设置
          <ul class="subMenu">
            <li>安全设置+
              <ul class="thirdMenu">
                <li><a href="#">修改账户密码</a></li>
                <li><a href="#">手机绑定</a></li>
                <li><a href="#">其他</a></li>
              </ul>
            </li>
          </ul>
          <ul class="subMenu">
            <li>个人资料+
              <ul class="thirdMenu">
                <li><a href="#">修改头像、昵称</a></li>
                <li></li>
                <li></li>
              </ul>
            </li>
          </ul>
          <ul class="subMenu">
            <li>账号绑定+
              <ul class="thirdMenu">
                <li><a href="#">微信绑定</a></li>
                <li><a href="#">支付宝绑定</a></li>
                <li></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">帮助中心</a></li>
      </ul>
    </div>
    <div class="userImg">
      <img src="/static/images/expertsImg/1.jpg"/>

      <div class="userInfo">
        <span>昵称:{{ user1 }}</span>
        <span>积分:2002</span>
        <span>余额:￥145</span>
        <el-button type="danger"
                   style="height: 24px;width: 55px;padding:0;font-size: 12px;bottom: 0;position:absolute;bottom: 10px;right: 10px">
          退出登录
        </el-button>
      </div>
    </div>

    <div class="userImg">
      <img src="/static/images/expertsImg/1.jpg">
    </div>
    <el-popover
      placement="top-start"
      title="标题"
      width="200"
      trigger="hover"
      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
      <el-button slot="reference" style="color: white">
        <div class="userInfo">
          <span>昵称:{{ user1 }}</span>
        </div>
      </el-button>
    </el-popover>


    <el-button type="primary"
               style="background-color:#2d83fc;border :solid 0px ;height: 30px;font-size: 14px;line-height: 5px;margin-left: 20px;display: none">
      <a href="/" @click="$message.success('注销成功')" style="text-decoration: none;color: white;">注销</a></el-button>

  </div>


  </div>

</template>

<script>

  export default {
    name: "navi",
    components: {},
    data() {
      return {
        user1: "数据大咖",

      }
    },
    methods: {},
    created() {
    },
    components: {},
    data() {
      return {
        user1: "数据大咖",

      }
    }, methods: {}, created() {
    }
  }
</script>

<style scoped lang="stylus">


  .naviPane
    position relative
    z-index 2



    :after
      clear: both;
      content: "";
      display: block
    background-color #35abf8
    height 60px
    width 1000px
    margin 0 auto

    .userImg
      margin-left 20px
      float: left;
      width 60px
      height 60px
      &:hover
        .userInfo
          display block


      img
        padding 5px
        width 50px
        height 50px
        border-radius: 30px;

      .userInfo
        color white
        position: absolute;
        right 0px
        top 59px
        z-index 3
        background-color #35abf8
        width 200px
        height 100px
        list-style: none
        font-size 14px
        display none

        :nth-child(1) {
          margin 0px 0 0 3px
          float: left;
        }

        :nth-child(2) {
          margin 0px 0 0 10px

        }

        :nth-child(3) {
          margin 10px 0 0 10px
          float: left;
        }

    border-radius 3px

    .userImg
      float: left;
      width 60px
      height 60px

      img
        padding 5px
        width 50px
        height 50px
        border-radius: 30px;

    .userInfo
      position: absolute;
      right 0px
      top 59px
      z-index 3
      background-color #35abf8
      width 200px
      height 100px
      list-style: none
      font-size 14px

      :nth-child(1) {
        margin 10px 0 0 10px

        float: left;
      }


    .naviInfo
      height 60px
      line-height 60px
      width 750px
      float left

      ul
        margin 0
        padding 0
        height 60px

        :after {
          clear: both;
          content: "";
          display: block
        }
        line-height 60px
        list-style none

        .mainMenu
          &:hover
            .subMenu
              display block
          position: relative;

        li
          color white
          width 120px
          height 60px
          float left

          a
            color #ffffff
            text-decoration none


          ul
            display none

            &:hover
              .thirdMenu
                display block

            li
              background-color #35abf8
              color white
              line-height 60px
              text-align center

              ul
              .thirdMenu
                position absolute
                top 60px
                left 120px
                background-color #35abf8
                width 120px
                height 120px
                display none

                li
                  a
                    color #ffffff
                    text-decoration none


    .logo

      width 220px
      height 60px
      float left

      a
        text-decoration: none
        color #ffffff

      img
        width 60px
        height 60px

</style>
